// components/player-list/player-list.js
Component({
  options: {
    // 页面样式影响组件，组件不影响页面
    styleIsolation: "apply-shared"
  },
  /**
   * 组件的属性列表
   */
  properties: {
    visible: Boolean,
    songs: Array,
    currentSongIndex: Number
  },
  /**
   * 组件的初始数据
   */
  data: {
  },

  // 相当于watch
  observers: {
    visible(visible) {
      if (visible) {
        this.animate('.player-list-mask', [{opacity: 0}, {opacity: 1}], 200)
        this.animate('.player-list-container', [{ bottom: '-750rpx' }, {bottom: '20rpx'}], 200)
      }
    },
  },
  /**
   * 组件的方法列表
   */
  methods: {
    close() {
      this.animate('.player-list-mask', [{opacity: 1}, {opacity: 0}], 200, () => {
        this.triggerEvent('setVisible', false);
        // this.clearAnimation('.player-list-mask');
      })

      this.animate('.player-list-container', [{ bottom: '20rpx' }, {bottom: '-750rpx'}], 200, () => {
        // this.clearAnimation('.player-list-container');
      })
    },
    setCurrentSongIndex(e) {
      const index = e.currentTarget.dataset.index;
      this.close();
      this.triggerEvent('setCurrentSongIndex', index);
    },
  },
})
